<template>
  <div>
    <div class="tender">
      <div class="phoneNum_top">
        <span class="titleddd" :class="{ active: titles == item.id }" v-for="item in title" :key="item.id"
          @click="titlesClick(item)">{{ item.name }}</span>
      </div>
      <div v-if="titles == '1'">
        <div>
          <span class="mr10">
            <el-date-picker style="width: 220px" v-model="times" type="daterange" start-placeholder="开始日期"
              end-placeholder="结束日期" :disabled-date="disabledDate" format="YYYY/MM/DD" value-format="x"
              @change="timeClick" />
          </span>
          <span class="mr10">
            <el-input style="width: 200px" v-model="zhaobiao.offerings" placeholder="请输入产品名称" @change="handleChanpin" />
          </span>
          <span class="mr10">
            <el-cascader v-model="zhaobiao.gGoname" :options="gGoname" placeholder="全部联系人" @change="handleChange" />
          </span>
          <span class="mr10">
            <el-cascader v-model="proPtions" placeholder="请选择项目地区" :options="options" :props="props"
              collapse-tags-tooltip collapse-tags clearable @change="recognize6" />
          </span>
        </div>
      </div>
    </div>
    <el-table v-loading="signalsRadio1.lxinrenLOgin" element-loading-text="加载中..." v-if="titles == '1'"
      :data="signalsRadio1.lianxirenLiss.slice(lxrq, lxrh)" style="width: 100%"
      :header-cell-style="{ backgroundColor: '#E6E9FF', color: '#333' }">
      <el-table-column label="姓名" align="center">
        <template #default="{ row }">
          <span v-if="zhaobiao.gGoname == '1' || zhaobiao.gGoname == '2'">{{
          row.top_score_hits.hits.hits[0]._source.xmlx
        }}</span>
          <span v-if="zhaobiao.gGoname == '3'">{{
          row.top_score_hits.hits.hits[0]._source.zblx
        }}</span>
          <!-- {{ showFirstName('666') }}  -->
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center">
        <template #default="{ row }">
          <!-- phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); -->
          <div>{{ row.key }}</div>
          <div v-if="row.company_num.value > 1" style="color: #ccc">
            同电话企业{{ row.company_num.value }}家
          </div>
        </template>
      </el-table-column>
      <el-table-column label="相关标讯数量" align="center">
        <template #default="{ row }">
          <span @click="bxsl(row.key)">{{ row.bx_count.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="主要负责产品" width="150">
        <template #default="{ row }">
          <div style="display: flex; justify-content: space-between">
            <div>
              <span v-for="ele in row.field1Values.buckets.slice(0, 1)" style="
                  flex: 1;
                  margin-right: 5px;
                  padding: 2px 3px;
                  background-color: #f43107;
                  color: #ffffff;
                  border-radius: 5px;
                ">{{ ele.key }}</span>
            </div>
            <div v-if="row.field1Values.buckets.length > 1" class="more" @click="moreGd(row.field1Values.buckets)">
              更多
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="最近一次负责项目时间" align="center">
        <template #default="{ row }">
          {{ timestamp(row.max_time.value) }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center">
                <template #default>
                    123
                </template>
            </el-table-column> -->
    </el-table>
    <el-table v-if="titles == '2'" :data="tableData" style="width: 100%"
      :header-cell-style="{ backgroundColor: '#FCE2E2', color: '#333' }">
      <el-table-column label="姓名" align="center">
        <template #default>
          <!-- {{ showFirstName('3666') }} -->
        </template>
      </el-table-column>

      <el-table-column label="联系电话" align="center">
        <template #default>
          <!-- phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); -->
        </template>
      </el-table-column>
      <el-table-column label="职位" align="center">
        <template #default> </template>
      </el-table-column>
      <el-table-column label="评分" align="center">
        <template #default> </template>
      </el-table-column>
      <el-table-column label="信息来源" align="center">
        <template #default> </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="产品列表" width="30%" :before-close="handleClose">
      <div class="infordisplay">
        <span class="cate_label" v-for="item in boxes">{{ item.key }}</span>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogVisible" title="产品列表" width="30%" :before-close="handleClose">
      <div class="infordisplay">
        <span class="cate_label" v-for=" item  in  boxes ">{{ item.key }}</span>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogVisible1" title="产品列表" width="70%" :before-close="handleClose">
      <div style="padding: 20px;">
        <el-table v-loading="signalsRadio1.phoneLoading" element-loading-text="加载中..."
          :data="signalsRadio1.lianxirenphone" style="width: 100%"
          :header-cell-style="{ backgroundColor: '#E6E9FF', color: '#333' }">
          <el-table-column label="公告标题">

            <template #default="{ row }">
              <span @click="nameClick(row.nid)"> {{ row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品">
            <template #default="{ row }">
              <div style="display: flex; justify-content: center;">
                <div></div>
                <span style="margin-right: 20px;" v-if="row.products != null || row.products != undefined"
                  v-for=" i in row.products[0]" :key="i.doc_count">{{
          i.names[0] }}</span>
                <span style="margin-right: 20px;" v-else>{{}}</span>
                <div v-if="row.products !== null && row.products != undefined && row.products.length > 0" class="more">
                  +{{
          row.products.length }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" align="center">

            <template #default="{ row }">
              {{ timestamp(row.release_time) }}
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: space-between; margin: 15px 0;">
          <div></div>
          <el-pagination small background layout="prev, pager, next" :total="signalsRadio1.total" class="mt-4"
            @current-change="handleCurrentChanges" />
        </div>
      </div>
    </el-dialog>

    <div style="display: flex; justify-content: space-between; margin: 15px 0;">
      <div></div>
      <el-pagination small background layout="prev, pager, next" :total="signalsRadio1.lianxireTiTle" class="mt-4"
        @current-change="handleCurrentChange" @next-click="nextclick" @prev-click="prevclick" />
    </div>
  </div>
</template>

<script setup>
import domData from "@/utils/json/dom.json";
import "@/assets/com/com.scss";
import { reactive, ref } from "vue";
import { showFirstName, timestamp } from "@/utils/index";
import { useRadio1Store } from "@/pain/search/search";
import { useCounterVip } from "@/pain/vip/index.js";
import { useRouter } from "vue-router";
import { decrypt } from "@/utils/index";
const router = useRouter();
const tokens = localStorage.getItem("token")
let token = JSON.parse(decrypt(tokens))
const useVip = useCounterVip();
const signalsRadio1 = useRadio1Store();
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);

let times = ref();
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
let zhaobiao = reactive({
  offerings: "",
  leave: [],
  market: [],
  quarter: [],
  time: [
    {
      oneTime: "",
      twoTime: "",
    },
  ],
  gGoname: "2",
});

signalsRadio1.lianxi_canshu = zhaobiao;
const props = { multiple: true, checkStrictly: true };
let titles = ref("1");
let titlesIndex = ref("");
let title = ref([
  {
    id: "1",
    name: "招中标项目",
  },
  {
    id: "2",
    name: "公司",
  },
]);
const titlesClick = (item) => {
  console.log(item);
  titles.value = item.id;
  titlesIndex.value = item.id;
};

let options = [];
let proPtions = ref([]);
let children2 = ref([]);
let children3 = ref([]);
let diquArr = ref([]);
domData.forEach((aaa) => {
  diquArr.value.push(aaa);
});
options = domData.filter((item) => item.parent === 100000);
domData.forEach((item) => {
  Reflect.set(item, "value", item.label);
});
options.forEach((element) => {
  children2 = domData.filter((word) => element.adcode == word.parent);
  Reflect.set(element, "children", children2);
  // children2.forEach((ele) => {
  //     children3 = domData.filter((word) => ele.adcode == word.parent);
  //     Reflect.set(ele, "children", children3);
  // });
});
let state = reactive({
  newList: [],
  newArr: [],
  optionsArr: [],
  children2Arr: [],
  children3Arr: [],
});
const recognize6 = () => {
  state.newList = [];
  state.newArr = [];
  state.optionsArr = [];
  state.children2Arr = [];
  state.children3Arr = [];
  zhaobiao.leave = [];
  zhaobiao.market = [];
  zhaobiao.quarter = [];
  console.log("valie", proPtions.value);
  proPtions.value.forEach((i) => {
    i.forEach((l) => {
      state.newList.push(l);
    });
  });

  diquArr.value.forEach((j) => {
    state.newList.filter((words) => {
      if (j.label == words) {
        state.newArr.push(j);
      }
    });
  });

  state.newArr = Array.from(new Set(state.newArr));
  options.forEach((j1) => {
    state.newArr.filter((words) => {
      if (j1.adcode == words.adcode) {
        state.optionsArr.push({
          id: j1.adcode,
          name: j1.label,
        });
      }
      return;
    });
  });
  options.forEach((element) => {
    children2 = domData.filter((word) => element.adcode == word.parent);
    children2.forEach((ele) => {
      state.newArr.filter((words1) => {
        if (ele.adcode == words1.adcode) {
          state.children2Arr.push({
            id: ele.adcode,
            name: ele.label,
          });
        }
      });
      children3 = domData.filter((word) => ele.adcode == word.parent);
      children3.forEach((lll) => {
        state.newArr.filter((words2) => {
          if (lll.adcode == words2.adcode) {
            state.children3Arr.push({
              id: lll.adcode,
              name: lll.label,
            });
          }
        });
      });
    });
  });
  zhaobiao.leave = Array.from(new Set(state.optionsArr));
  zhaobiao.market = Array.from(new Set(state.children2Arr));
  zhaobiao.quarter = Array.from(new Set(state.children3Arr));
  signalsRadio1.getcompany_contact();
};
let boxes = ref([]);
const moreGd = (gd) => {
  dialogVisible.value = true;
  boxes.value = gd;
};
const handleChanpin = () => {
  signalsRadio1.getcompany_contact();
};

const timeClick = (value) => {
  console.log(value);
  if (value == null) {
    signalsRadio1.getcompany_contact();
    return;
  }
  const dateObject1 = new Date(value[0]);
  let seconds1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(value[1]);
  let seconds2 = Math.floor(dateObject2.getTime() / 1000);
  zhaobiao.time[0] = {
    oneTime: seconds1,
    twoTime: seconds2,
  };

  signalsRadio1.getcompany_contact();
};

// signalsRadio1.getcompany_contact()

let lxrq = ref(0);
let lxrh = ref(9);
const handleCurrentChange = (val) => {
  console.log(lxrq, lxrh);
  console.log("handleCurrentChange", val);
  if (val > 1 && token.level_id < 2) {
    return (useVip.maskShow = true);
  }
  if (val == "1") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = 9;
  } else if (val == "2") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "3") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "4") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "5") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "6") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "7") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "8") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "9") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "10") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "11") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "12") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "13") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "14") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "15") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "16") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "17") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "18") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "19") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "20") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  }
};

const nextclick = (val) => {
  console.log(lxrq, lxrh);
  console.log("nextclick", val);
  // if (val > 1 && token.level_id < 2) {
  //     return useVip.maskShow = true
  // }
  if (val == "1") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = 9;
  } else if (val == "2") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "3") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "4") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "5") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "6") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "7") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "8") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "9") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "10") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "11") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "12") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "13") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "14") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "15") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "16") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "17") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "18") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "19") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  } else if (val == "20") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value + 10;
  }
};
const prevclick = (val) => {
  console.log(lxrq, lxrh);
  if (val == "1") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = 9;
  } else if (val == "2") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value - 10;
  } else if (val == "3") {
    lxrq.value = (val - 1) * 10;
    lxrh.value = lxrq.value - 10;
  } else if (val == "4") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "5") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "6") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "7") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "8") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "9") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "10") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "11") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "12") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "13") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "14") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "15") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "16") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "17") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "18") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "19") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  } else if (val == "20") {
    lxrq.value = lxrh.value;
    lxrh.value = lxrq.value - 10;
  }
};
const handleClose = (done) => {
  done();
};

let gGoname = ref([
  {
    value: "2",
    label: "招标联系人",
  },
  {
    value: "3",
    label: "中标联系人",
  },
]);
const handleChange = () => {
  signalsRadio1.getcompany_contact();
};

const bxsl = (data) => {
  dialogVisible1.value = true;
  signalsRadio1.lxr_phone = data;
  signalsRadio1.lianxi_type = zhaobiao.gGoname[0];
  signalsRadio1.getcompany_contacts_details();
};

const nameClick = (nid, infoid) => {
  const href = router.resolve({
    path: `/searchInfo/${nid}`,
  });
  window.open(href.href, "_blank");
};

const handleCurrentChanges = (value) => {
  signalsRadio1.xiangqing_pages.currentPage = value
  signalsRadio1.getcompany_contacts_details()
}

</script>

<style lang="scss" scoped>
.more {
  margin-left: 15px;
  color: #5473da;
}

.infordisplay {
  display: flex;
  flex-wrap: wrap;
  max-height: 400px;
  overflow: auto;
  padding: 16px 24px;

  .cate_label {
    margin-right: 10px;
    margin-bottom: 8px;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 14px;
    background: rgba(0, 143, 147, 0.1);
    color: #f43107;
  }
}

.mr10 {
  margin-right: 10px;
}

.active {
  padding: 5px 10px !important;
  border-radius: 4px !important;
  background-color: #f43107 !important;
  color: #ffffff !important;
}

.phoneNum {
  padding-top: 20px;

  .phoneNum_top {
    display: flex;
    justify-content: space-between;

    .biao {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      // background-color: #F43107;
      border-radius: 10px;
    }
  }

  .phoneNum_box {
    display: flex;
    align-items: center;
    padding-bottom: 5px;

    .photo_xbox {
      width: 170px;
      height: 80px;
      margin-right: 20px;
      margin-top: 20px;
      padding: 20px 0 0 20px;
      background-color: #ffffff;
      box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.16);
      border-radius: 8px;

      .phoneNum_name {
        margin-bottom: 15px;
      }

      .photo_size {
        margin-left: 10px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333;
      }
    }
  }
}

.tender {
  margin: 30px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #dddddd;

  .phoneNum_top {
    display: flex;
    margin-bottom: 20px;

    .titleddd {
      padding: 5px 10px;
      background-color: #fce2e0;
      border-radius: 4px;
      color: #f43107;
    }
  }
}

.biao {
  width: 4px;
  height: 16px;
  margin-right: 10px;
  background-color: #f43107;
  border-radius: 10px;
}

::v-deep .el-dialog__body {
  height: 100%;
}
</style>
